
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单词卡片测试</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .card {
            perspective: 1000px;
            transition: transform 0.3s ease;
            transform-style: preserve-3d;
        }
        .card.flipped {
            transform: rotateY(180deg);
        }
        .card-face {
            backface-visibility: hidden;
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            border-radius: 0.75rem;
            padding: 2rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        .card-front {
            background-color: #f8fafc;
            color: #1e293b;
        }
        .card-back {
            background-color: #334155;
            color: #f8fafc;
            transform: rotateY(180deg);
        }
        .word-display {
            font-size: 2.5rem;
            font-weight: bold;
            text-align: center;
            margin: auto 0;
        }
        .hint-text {
            font-size: 0.875rem;
            color: #64748b;
            text-align: center;
            width: 100%;
        }
        .unit-btn.active {
            transform: scale(1.05);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
        }
        .unit-1 { background-color: #3b82f6; }
        .unit-2 { background-color: #10b981; }
        .unit-3 { background-color: #f59e0b; }
        .unit-4 { background-color: #8b5cf6; }
        .unit-5 { background-color: #ec4899; }
        .unit-all { background-color: #64748b; }
        .mode-btn.active {
            background-color: #4f46e5;
            color: white;
        }
    </style>
</head>
<body class="bg-slate-100 min-h-screen">
    <div class="container mx-auto px-4 py-8">
        <h1 class="text-3xl font-bold text-center text-slate-800 mb-8">单词卡片测试</h1>
        
        <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6 mb-8">
            <div class="flex justify-center gap-4 mb-4">
                <button id="en-to-zh" class="mode-btn px-4 py-2 bg-blue-500 text-white rounded-lg hover:opacity-90 transition active:scale-95 active">英文→中文</button>
                <button id="zh-to-en" class="mode-btn px-4 py-2 bg-blue-500 text-white rounded-lg hover:opacity-90 transition active:scale-95">中文→英文</button>
            </div>
            
            <h2 class="text-xl font-semibold text-slate-700 mb-4">选择测试单元</h2>
            <div class="flex flex-wrap gap-2 mb-4">
                <button data-unit="all" class="unit-btn unit-all px-4 py-2 text-white rounded-lg hover:opacity-90 transition active:scale-95">全部单词</button>
                <button data-unit="1" class="unit-btn unit-1 px-4 py-2 text-white rounded-lg hover:opacity-90 transition active:scale-95">第一单元</button>
                <button data-unit="2" class="unit-btn unit-2 px-4 py-2 text-white rounded-lg hover:opacity-90 transition active:scale-95">第二单元</button>
                <button data-unit="3" class="unit-btn unit-3 px-4 py-2 text-white rounded-lg hover:opacity-90 transition active:scale-95">第三单元</button>
                <button data-unit="4" class="unit-btn unit-4 px-4 py-2 text-white rounded-lg hover:opacity-90 transition active:scale-95">第四单元</button>
                <button data-unit="5" class="unit-btn unit-5 px-4 py-2 text-white rounded-lg hover:opacity-90 transition active:scale-95">第五单元</button>
            </div>
            <div class="flex justify-between items-center">
                <div class="text-sm text-slate-500">当前单词: <span id="current-count">0</span>/<span id="total-count">0</span></div>
                <button id="shuffle-btn" class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition active:scale-95">
                    <i class="fas fa-random mr-2"></i>随机顺序
                </button>
            </div>
        </div>

        <div id="card-container" class="max-w-md mx-auto mb-8 relative" style="height: 300px;">
            <div class="card w-full h-full relative cursor-pointer">
                <div class="card-face card-front">
                    <div class="word-display" id="front-text">点击选择单元开始测试</div>
                    <div class="hint-text">点击卡片翻转</div>
                </div>
                <div class="card-face card-back">
                    <div class="word-display" id="back-text"></div>
                    <div class="hint-text text-slate-300">点击卡片翻转</div>
                </div>
            </div>
        </div>

        <div class="max-w-md mx-auto flex justify-between">
            <button id="prev-btn" class="px-6 py-2 bg-slate-300 text-slate-700 rounded-lg hover:bg-slate-400 transition disabled:opacity-50 active:scale-95" disabled>
                <i class="fas fa-arrow-left mr-2"></i>上一个
            </button>
            <button id="next-btn" class="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition disabled:opacity-50 active:scale-95" disabled>
                下一个<i class="fas fa-arrow-right ml-2"></i>
            </button>
        </div>
    </div>

    <script>
        // 预加载单词数据
        const wordsData = [
            { en: "worried", zh: "担心的", unit: 1 },
            { en: "late", zh: "晚的", unit: 1 },
            { en: "worry", zh: "担心", unit: 1 },
            { en: "just", zh: "正，恰恰", unit: 1 },
            { en: "in time", zh: "及时，按时", unit: 1 },
            { en: "welcome", zh: "欢迎", unit: 1 },
            { en: "feel", zh: "感受", unit: 1 },
            { en: "today", zh: "今天", unit: 1 },
            { en: "so", zh: "如此，非常", unit: 1 },
            { en: "excited", zh: "兴奋的", unit: 1 },
            { en: "matter", zh: "问题；事情", unit: 2 },
            { en: "sad", zh: "悲伤的", unit: 2 },
            { en: "find", zh: "找到", unit: 2 },
            { en: "dog", zh: "狗", unit: 2 },
            { en: "cry", zh: "哭泣", unit: 2 },
            { en: "together", zh: "一起", unit: 2 },
            { en: "with", zh: "有", unit: 2 },
            { en: "model", zh: "模型", unit: 3 },
            { en: "plane", zh: "飞机", unit: 3 },
            { en: "angry", zh: "生气的", unit: 3 },
            { en: "better", zh: "更好地", unit: 3 },
            { en: "calm down", zh: "冷静", unit: 3 },
            { en: "fix", zh: "修理", unit: 3 },
            { en: "his", zh: "他的", unit: 4 },
            { en: "mouse", zh: "老鼠", unit: 4 },
            { en: "come", zh: "来", unit: 4 },
            { en: "have", zh: "有", unit: 4 },
            { en: "idea", zh: "主意", unit: 4 },
            { en: "stop", zh: "停止", unit: 4 },
            { en: "but", zh: "但是", unit: 4 },
            { en: "animal", zh: "动物", unit: 5 },
            { en: "diffent", zh: "不同的", unit: 5 },
            { en: "interesting", zh: "有趣的", unit: 5 },
            { en: "story", zh: "故事", unit: 5 },
            { en: "brush", zh: "刷子；画笔", unit: 5 }
        ];

        // DOM缓存
        const elements = {
            card: document.querySelector('.card'),
            frontText: document.getElementById('front-text'),
            backText: document.getElementById('back-text'),
            prevBtn: document.getElementById('prev-btn'),
            nextBtn: document.getElementById('next-btn'),
            shuffleBtn: document.getElementById('shuffle-btn'),
            unitBtns: document.querySelectorAll('.unit-btn'),
            modeBtns: document.querySelectorAll('.mode-btn'),
            currentCount: document.getElementById('current-count'),
            totalCount: document.getElementById('total-count')
        };

        // 状态管理
        const state = {
            currentWords: [],
            currentIndex: 0,
            isFlipped: false,
            isRandom: false,
            activeUnit: null,
            testMode: 'en-to-zh' // 默认英文→中文模式
        };

        // 初始化应用
        function init() {
            // 事件委托优化
            document.addEventListener('click', (e) => {
                if (e.target.closest('.card')) flipCard();
                if (e.target.closest('#prev-btn')) showPrevWord();
                if (e.target.closest('#next-btn')) showNextWord();
                if (e.target.closest('#shuffle-btn')) toggleShuffle();
                if (e.target.closest('.unit-btn')) selectUnit(e.target.closest('.unit-btn').dataset.unit);
                if (e.target.closest('.mode-btn')) setTestMode(e.target.closest('.mode-btn').id);
            });

            // 初始状态更新
            updateNavigationButtons();
            setTestMode('en-to-zh');
        }

        // 设置测试模式
        function setTestMode(mode) {
            state.testMode = mode;
            
            // 更新UI
            elements.modeBtns.forEach(btn => {
                btn.classList.toggle('active', btn.id === mode);
            });
            
            // 刷新当前显示
            if (state.currentWords.length > 0) {
                updateWordDisplay();
            }
        }

        // 单元选择
        function selectUnit(unit) {
            if (state.activeUnit === unit) return;
            
            state.activeUnit = unit;
            state.currentWords = unit === 'all' 
                ? [...wordsData] 
                : wordsData.filter(word => word.unit === parseInt(unit));
            
            // 更新UI
            elements.unitBtns.forEach(btn => {
                btn.classList.toggle('active', btn.dataset.unit === unit);
            });

            if (state.isRandom) {
                shuffleWords();
            } else {
                state.currentIndex = 0;
                updateWordDisplay();
            }
            
            updateCountDisplay();
            updateNavigationButtons();
        }

        // 更新单词显示
        function updateWordDisplay() {
            if (state.currentWords.length === 0) {
                elements.frontText.textContent = '请选择单元开始测试';
                elements.backText.textContent = '';
                return;
            }

            const currentWord = state.currentWords[state.currentIndex];
            
            if (state.testMode === 'en-to-zh') {
                elements.frontText.textContent = currentWord.en;
                elements.backText.textContent = currentWord.zh;
            } else {
                elements.frontText.textContent = currentWord.zh;
                elements.backText.textContent = currentWord.en;
            }

            // 重置卡片状态
            if (state.isFlipped) {
                elements.card.classList.remove('flipped');
                state.isFlipped = false;
            }
        }

        // 翻转卡片
        function flipCard() {
            if (state.currentWords.length === 0) return;
            
            elements.card.classList.toggle('flipped');
            state.isFlipped = !state.isFlipped;
        }

        // 导航功能
        function showPrevWord() {
            if (state.currentIndex > 0) {
                state.currentIndex--;
                updateWordDisplay();
                updateCountDisplay();
                updateNavigationButtons();
            }
        }

        function showNextWord() {
            if (state.currentIndex < state.currentWords.length - 1) {
                state.currentIndex++;
                updateWordDisplay();
                updateCountDisplay();
                updateNavigationButtons();
            }
        }

        // 随机顺序
        function toggleShuffle() {
            state.isRandom = !state.isRandom;
            
            if (state.isRandom) {
                elements.shuffleBtn.classList.replace('bg-green-500', 'bg-purple-500');
                elements.shuffleBtn.innerHTML = '<i class="fas fa-random mr-2"></i>顺序模式';
                shuffleWords();
            } else {
                elements.shuffleBtn.classList.replace('bg-purple-500', 'bg-green-500');
                elements.shuffleBtn.innerHTML = '<i class="fas fa-random mr-2"></i>随机顺序';
                selectUnit(state.activeUnit || 'all');
            }
        }

        // 洗牌算法
        function shuffleWords() {
            if (state.currentWords.length === 0) return;
            
            for (let i = state.currentWords.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [state.currentWords[i], state.currentWords[j]] = [state.currentWords[j], state.currentWords[i]];
            }
            
            state.currentIndex = 0;
            updateWordDisplay();
            updateCountDisplay();
            updateNavigationButtons();
        }

        // UI更新
        function updateCountDisplay() {
            elements.currentCount.textContent = state.currentIndex + 1;
            elements.totalCount.textContent = state.currentWords.length;
        }

        function updateNavigationButtons() {
            elements.prevBtn.disabled = state.currentIndex === 0 || state.currentWords.length === 0;
            elements.nextBtn.disabled = state.currentIndex === state.currentWords.length - 1 || state.currentWords.length === 0;
        }

        // 启动应用
        document.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>
